<script setup>
import LfDropdownPanel from '@/components/commonUI/LfDropdownPanel.vue'
import ArrowIcon from '@/components/svgComponents/ArrowIcon.vue'

const props = defineProps({
  filter: {
    type: Number,
    default: 0,
  },
  menuOptions: {
    type: Array,
  },
  title: {
    type: String,
    default: '',
  },
  checkedTitle: {
    type: Array,
    default: () => [],
  },
})

const dropdownRef = ref(null)

const emit = defineEmits(['change'])

const handleFilterChange = (filter) => {
  emit('change', filter)
  dropdownRef.value.hidePanel()
}
</script>

<template>
  <div class="relative w-fit">
    <LfDropdownPanel position="bottom-left" ref="dropdownRef">
      <div class="flex gap-1 p-2 px-3 bg-[--fill-2] w-fit cursor-pointer rounded-full">
        <div class="text-sm">{{ checkedTitle[filter] }}</div>
        <ArrowIcon />
      </div>
      <template #content>
        <div class="flex flex-col items-start gap-1 p-3 bg-[--fill-0] w-[170px] rounded-lg shadow-lg">
          <div class="text-sm">{{ title }}</div>
          <div @click="handleFilterChange(0)" class="flex justify-between items-center w-full cursor-pointer">
            <div>{{ menuOptions[0] }}</div>
            <div class="w-4 h-4 rounded-full border-solid border-2 border-black flex justify-center items-center">
              <div v-if="filter === 0" class="w-2 h-2 bg-slate-600 rounded-full"></div>
            </div>
          </div>
          <div @click="handleFilterChange(1)" class="flex justify-between items-center w-full cursor-pointer">
            <div>{{ menuOptions[1] }}</div>
            <div class="w-4 h-4 rounded-full border-solid border-2 border-black flex justify-center items-center">
              <div v-if="filter === 1" class="w-2 h-2 bg-slate-600 rounded-full"></div>
            </div>
          </div>
        </div>
      </template>
    </LfDropdownPanel>
  </div>
</template>

<style scoped lang="scss"></style>
